<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>下面是app的实例范围</p>
			<test></test>
			<my-test></my-test>
		</div>
		<div id="app2">
			<p>下面是app2的实例范围</p>
			<test></test>
		</div>
		<template id="t">
			<div>
				<img src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" @click="fn"/>
				<ul>
					<li>南北船合并获确认旗下8家公司同晚集体公告</li>
					<li>全球权威大学排名中国高校表现抢眼</li>
				</ul>
				<h1>{{msg}}</h1>
			</div>
		</template>
	</body>
	<script src="../vue.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			components:{
				'test':{
					template:'#t',
					data:function(){
						return{
							msg:'hello'
						}
					},
					methods:{
						fn:function(){
							console.log("图片被点击");
						}
					}
				},
				'myTest':{
					template:'<h1>myTest组件</h1>'
				}
			}
		});
		var vm2 = new Vue({
			el:'#app2',
			data:{
				
			}
		});
	</script>
</html>
